<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https:d3js.org/d3.v6.min.js"></script>
    </head>
    <body>
        <!--<script src="path.js"></script>-->
	<script>
 
	class Path{
	  constructor(parms){
	    this.data = parms.data,
	    this.width = parms.width,
	    this.height = parms.height,
	    this.innerRadius = parms.innerRadius,
	    this.outerRadius = parms.outerRadius
	    var inner = this.innerRadius
	    var outer = this.outerRadius

	    this.svg = d3.select("body").append('svg').attr('width',this.width).attr('height',this.height)
	    this.pie = d3.pie()
	    var arc = d3.arc()
	      .innerRadius(inner)
	      .outerRadius(this.outerRadius)
	    var arc2 = d3.arc()
	      .innerRadius(this.innerRadius)
	      .outerRadius(this.outerRadius+10)

	    this.svgG = this.svg.selectAll("g")
	    .data(this.pie(this.data))
	    .join("g")
	    .attr('transform','translate('+this.width/2+','+this.height/2+')')
	    .on('mouseover',function(e,d){
	      d3.select(this).select('path')
	      .transition()
	      .attr('d',function(d){
		
		return arc2(d)
	      })
	    })
	    .on('mouseout',function(e,d){
	      d3.select(this).select('path')
	      .transition()
	      .attr('d',function(d){
		return arc(d)
	      })
	    })
	    
	    this.svgG.append('path')
	      .attr('d',d=>{return arc(d)})
	      .attr('fill',function(d){return d.data==80?'red':d.data == 15?'blue':d.data ==20?'purple':d.data==18?'green':'yellow'})
	      .attr('stroke','black')
	    this.svgG.append('text')
	      .text(function(d){return d.data})
	      .attr('transform',d=>{
		return 'translate('+ arc.centroid(d)+')'
	    })
	      .attr('text-anchor','middle')
	  }
		
	}


	
	var aa = new Path({
	  data : [80,15,20,18,30],
	  width : 600,
	  height:600,
	  innerRadius:0,
	  outerRadius:250,
	})
var scale = d3.scaleBand()
.domain([1,2,3,4])
.range([0, 100]);
console.log(scale(1));//0
console.log(scale(2));//25
console.log(scale(3));//50
console.log(scale(4));//75
//D3.js中的d3.range()函数用于返回一个数组，该数组包含从起始参数开始的算术级数，并在称为步的uniformly-spaced数值序列上进行迭代，并以终止参数结束。d3.range(起始参数，终止参数，迭代参数)，如果range()（第三个参数）函数未采用步进值，则其默认值被视为1
var A = d3.range(10,100,10)
console.log(A)
	</script>
    </body>
</html>